<template>
  <a-dropdown :trigger="['click']" v-model="show">
    <div slot="overlay">
      <div
        class="dropdown-tabs"
        :tabBarStyle="{ textAlign: 'center' }"
        :style="{ width: '297px' }"
      >
        <a-list class="tab-pane">
          <a-list-item
            class="cursor-pointer"
            @click="$router.push('/order/buy')"
          >
            <a-list-item-meta
              :title="`待处理商户订单  ${$store.state.account.tooking}`"
              description=""
            >
            </a-list-item-meta>
          </a-list-item>
          <a-list-item
            class="cursor-pointer"
            @click="$router.push('/order/sell')"
          >
            <a-list-item-meta
              :title="`待处理用户订单  ${$store.state.account.checking}`"
              description=""
            >
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
    </div>
    <span @click="fetchNotice" class="header-notice">
      <a-badge class="notice-badge" :count="count">
        <a-icon :class="['header-notice-icon']" type="bell" />
      </a-badge>
    </span>
  </a-dropdown>
</template>

<script>
export default {
  name: 'HeaderNotice',
  data() {
    return {
      loading: false,
      show: false,
    }
  },
  computed: {
    count() {
      return (
        1 * this.$store.state.account.tooking +
        1 * this.$store.state.account.checking
      )
    },
  },
  methods: {
    fetchNotice() {
      if (this.loading) {
        this.loading = false
        return
      }
      this.loadding = true
      setTimeout(() => {
        this.loadding = false
      }, 1000)
    },
  },
}
</script>

<style lang="less">
.header-notice {
  display: inline-block;
  transition: all 0.3s;
  span {
    vertical-align: initial;
  }
  .notice-badge {
    color: inherit;
    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}
.dropdown-tabs {
  background-color: @base-bg-color;
  box-shadow: 0 2px 8px @shadow-color;
  border-radius: 4px;
  .tab-pane {
    padding: 0 24px 12px;
    min-height: 120px;
  }
}
</style>
